<template>
  <div class="register">
    <NavBar title="注册" :leftArrow="true" :clickLeft="go2login" />
    <van-form @submit="onSubmit" class="van-wrap">
      <div class="wrap-item">
        <van-field
          v-model="form.name"
          name="name"
          label="姓名"
          label-class="label_style popup-value"
          required
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
      </div>
      <div class="wrap-item">
        <van-field
          v-model="form.phone"
          name="phone"
          label="手机号"
          label-class="label_style popup-value"
          required
          :rules="[
            { validator: validatorPhone, message: '请填写正确的手机号' },
          ]"
        />
      </div>
      <div class="wrap-item">
        <van-field
          v-model="form.aopa"
          name="aopa"
          label-class="label_style popup-value"
          label="AOPA编号"
          :rules="[{ validator, message: 'AOPA编号填写错误' }]"
        />
      </div>
      <!-- <van-field
        name="remember"
        label-class="label_style"
        label="常驻区域"
        required
        labek-width="4.2em"
      >
        <template #input>
          <van-row gutter="10">
            <van-col span="7">
              <van-field
                v-model="form.provinceName"
                readonly
                style="padding: 0"
                right-icon="arrow-down"
                placeholder="省"
                @click="visible.provice = true"
                :rules="[{ required: true, message: '请选择省份' }]"
              />
            </van-col>
          </van-row>
        </template>
      </van-field> -->
      <div class="wrap-item">
        <van-field
          name="remember"
          label-class="label_style popup-value"
          label="是否为公司"
        >
          <template #input>
            <van-row gutter="10" style="width: 100%">
              <van-col span="24">
                <van-field
                  class="vans-cless"
                  v-model="company.value"
                  readonly
                  style="padding: 0"
                  right-icon="arrow-down"
                  @click="company.show = true"
                />
              </van-col>
            </van-row>
          </template>
        </van-field>
      </div>
      <div class="wrap-item item-btn">
        <van-field
          ref="iss"
          name="remember"
          label-class="label_style popup-value"
          label="常驻区域"
          required
          class="only-border"
        >
          <template #input>
            <van-row gutter="24" style="width: 100%">
              <van-col span="24">
                <van-field
                  :disabled="true"
                  v-model="carmodel"
                  value
                  style="padding: 0"
                  :rules="[{ required: true, message: '请选择地址' }]"
                  @click="show = true"
                  class="van-clesses"
                />
              </van-col>
              <van-cell-group>
                <van-popup v-model="show" position="bottom">
                  <van-area
                    ref="area"
                    :area-list="areaLists"
                    @change="onChange"
                    @confirm="yes"
                    @cancel="show = false"
                  />
                </van-popup>
              </van-cell-group>
            </van-row>
          </template>
        </van-field>
      </div>

      <!-- :rules="[{ required: true, message: '请填写密码' }]" -->

      <div
        style="height: 100px; display: flex; align-items: center"
        class="delbor wrap-item"
      >
        <van-field
          name="file"
          label-class="label_style popup-value onlyonly"
          :label="form.isCompany === 0 ? 'AOPA证书' : '营业执照'"
          required
          :rules="[{ required: true, message: '请上传图片信息' }]"
        >
          <template #input>
            <van-uploader
              :before-read="beforeRead"
              :max-size="500 * 1024"
              @oversize="onOversize"
              class="uplod"
              v-model="fileList"
              :rules="[
                { validator: validatorAOPA, message: 'AOPA编号填写错误' },
              ]"
              :max-count="1"
            />

            <!-- :before-delete="afterDelete" -->
          </template>
        </van-field>
      </div>
      <div class="info-wrap wrap-item">
        <van-field
          v-model="form.remark"
          name="remark"
          label="基本信息"
          labek-width="4.2em"
          label-class="style popup-value longh"
          placeholder="请输入基本信息"
          required
          type="textarea"
          :rules="[{ required: true, message: '请填写基本信息' }]"
        />
      </div>
      <div style="margin: 16px" class="btn-wrap wrap-item item-btn">
        <van-button class="btn" round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>

    <van-action-sheet
      v-model="visible.provice"
      :actions="provinceList"
      close-on-click-action
      @select="onSelectProvice"
    />
    <van-action-sheet
      v-model="visible.city"
      :actions="cityList"
      close-on-click-action
      @select="onSelectCity"
    />
    <van-action-sheet
      v-model="visible.area"
      :actions="areaList"
      close-on-click-action
      @select="onSelectArea"
    />
    <van-action-sheet
      v-model="company.show"
      :actions="company.list"
      close-on-click-action
      @select="onSelectCompany"
    />
  </div>
</template>

<script>
import { areaList } from "./city";
import NavBar from "@/components/NavBar";
import { mapActions } from "vuex";
import moment from "moment";
import { Toast } from "vant";
import { GetProvinceList, UserRegister } from "@/api/user";
import { UploadOss } from "@/api/common";
export default {
  components: {
    NavBar,
  },
  data() {
    return {
      form: {
        name: "", //用户名
        phone: "", //手机号
        aopa: "", //aopa编号
        province: null, //省
        city: null, //市
        area: null, //区
        file: [], //营业或AOPA执照文件

        isCompany: 0, //是否为外包公司
        remark: "", //基本信息
        provinceName: "",
        cityName: "",
        areaName: "",
      },
      company: {
        show: false,
        value: "否",
        list: [
          { id: 0, name: "否" },
          { id: 1, name: "是" },
        ],
      },
      show: false,
      //当前选择的城市
      carmodel: "",
      areaLists: {
        province_list: {},
        city_list: {},
        county_list: {},
      },
      //存放当前选择的城市，点击确定时将它赋给carmodel
      con: "",
      areaList: [],
      status: {
        show: false,
        list: [
          { id: undefined, name: "全部任务状态" },
          { id: 1, name: "任务已发出" },
          { id: 2, name: "调度已确认" },
          { id: 3, name: "飞手已接受" },
          { id: 4, name: "飞行结束" },
          { id: 5, name: "任务已完成" },
          { id: 6, name: "任务已驳回" },
        ],
      },
      time: {
        show: false,
        list: [
          { name: "全部", id: undefined },
          {
            name: "最近一周",
            id:
              moment().subtract(7, "days").format("YYYY-MM-DD") +
              "~" +
              moment().format("YYYY-MM-DD"),
          },
          {
            name: "最近一月",
            id:
              moment().subtract(1, "month").format("YYYY-MM-DD") +
              "~" +
              moment().format("YYYY-MM-DD"),
          },
          {
            name: "最近三月",
            id:
              moment().subtract(3, "month").format("YYYY-MM-DD") +
              "~" +
              moment().format("YYYY-MM-DD"),
          },
          {
            name: "最近半年",
            id:
              moment().subtract(6, "month").format("YYYY-MM-DD") +
              "~" +
              moment().format("YYYY-MM-DD"),
          },
          {
            name: "最近一年",
            id:
              moment().subtract(12, "month").format("YYYY-MM-DD") +
              "~" +
              moment().format("YYYY-MM-DD"),
          },
        ],
      },
      search: {},

      provinceList: [],
      cityList: [],
      fileList: [],
      visible: {
        provice: false,
        city: false,
        area: false,
      },
      areatotal:[],
      code:[]
    };
  },
  methods: {
    
        beforeRead(file) {
          
      if (file.type !== 'image/jpeg') {
        Toast('请上传 jpg或png 格式图片');
        return false;
      }else if(file.type !== 'image/png'){
        Toast('请上传 jpg或png 格式图片');
        return false;
      }
      return true;
    },
    onOversize(){
       Toast('文件大小不能超过 500kb');
    },
    ...mapActions("user", ["Login"]),
    async getRegionInfo(data) {
      let resp = await GetProvinceList(data);
   
      if (resp.status === 1) {
        //  this.areaLists.province_list = resp.data;
      }
    },
    async onSelectProvice(val) {
     
      let resp = await GetProvinceList();
      if (resp.status === 1) {
      // this.areaLists.city_list = resp.data;
        this.form.city = null;
        this.form.cityName = "";
        this.form.area = null;
        this.form.areaName = "";
      }
    },
    async onSelectCity(val) {
     
      let resp = await GetProvinceList();
      if (resp.status === 1) {
          // this.areaLists.county_list = resp.data
        this.form.area = null;
        this.form.areaName = "";
      }
    },
    async onSelectArea(val) {
      let { id, name } = val;
      this.form.area = id;
      this.form.areaName = name;
    },
    onSelectCompany(val) {
      let { id, name } = val;
      this.form.isCompany = id;
      this.company.value = name;
      // this.search.time = id;
      // this.search.time_name = name;
    },
    validator(val) {
      if (val.length === 0 || (val.length >= 15 && val.length <= 18)) {
        return true;
      } else {
        return false;
      }
    },
    validatorPhone(val) {
      return /^(?:(?:\+|00)86)?1[3-9]\d{9}$/g.test(val);
      // if (val.length === 11) {
      //   return true;
      // } else {
      //   return false;
      // }
    },
    validatorAOPA(val) {},
    async onSubmit(value) {
      const { fileList } = this;
        console.log(fileList)
      let params = Object.assign({}, this.form);
      const formDate = new FormData();
      if (fileList.length > 0) {
        fileList.forEach((item) => {
          formDate.append("uploadFile", item.file);

        });
      }
     
      UploadOss(formDate).then((resp) => {
          console.log(resp)
        params.file = JSON.stringify([resp.data.filePath]);
        UserRegister(params).then((res) => {
              
          if (res.status === 1) {
            Toast.success("提交成功");
            this.$router.push("/login");
          }
        });
      });
    },
    go2login() {
      this.$router.push("/login");
    },
    onChange(picker, value, index) {
     
      let val = value.map(item=>item.name)
      let code  = value.map(item=>item.code)
      this.areatotal = [...val,...code]
      let areaName = "";
      for (var i = 0; i < value.length; i++) {
        areaName = areaName + value[i].name + " ";
      }
      this.con = areaName;
     
    },
    yes() {
     
      this.carmodel = this.con;
      this.show = false;
    
      // [this.form.province,this.form.city,this.form.area] = this.code
       [this.form.provinceName,this.form.cityName,this.form.areaName,this.form.province,this.form.city,this.form.area] = this.areatotal
       
    },
  },
  mounted() {
   
    this.areaLists.province_list = areaList.province_list;
    this.areaLists.city_list = areaList.city_list;
    this.areaLists.county_list = areaList.county_list;
    console.log(this.$refs.iss.$el)
  },
  
};
</script>

<style lang="scss" scoped>
.register {
  width: 100%;
  margin: 0 auto;
}
::v-deep {
  #app {
    font-size: 0.3rem;
  }
  .delbor .van-uploader__wrapper .van-field__control {
    margin: 0 !important;
  }
  .van-popup--bottom.van-popup--round {
    max-height: 10rem;
  }
  .label_style {
    font-size: 0.3rem;
  }
  .btn-wrap {
  }
  .btn {
    font-size: 0.293333rem;
    border-radius: 5px;
    width: 100%;
  }
  .van-field__control {
    font-size: 14px;
    color: #48a1fa;
    text-indent: 1em;
  }
  .van-field__error-message {
    height: 0.4rem;
    font-size: 0.266667rem;
  }
  .van-hairline--top-bottom::after {
    border-width: 0;
  }
  .van-field__body {
    color: #eee;
  }
}
@media screen and (min-width: 600px) and (max-width: 1025px) {
  .van-wrap {
    display: flex;
    flex-wrap: wrap;
    .wrap-item {
      width: 50%;
    }
    .delbor,
    .item-btn,
    .info-wrap,
    .only-border {
      width: 100%;
    }
  }
  .delbor {
    height: 100px !important;
  }
}
@media screen and (min-width: 1205px) {
  .delbor {
    height: 100px !important;
  }
  .van-wrap {
    display: flex;
    flex-wrap: wrap;
    .wrap-item {
      width: 50%;
    }
    .delbor,
    .item-btn,
    .info-wrap,
    .only-border {
      width: 100%;
    }
  }
}
</style>